<template>
  <div><img v-for="(dog, index) in dogList" :src="dog" :key="index"></div>
  <button @click="addDog">点我添加狗的图片</button>
  <div v-for="item in news" :key="item.id">
    <button @click="showNews(item)">点击跳转</button>
<!--    等价于这么写-->
<!--    <RouterLink :to="`/MyTest5/Child?id=${item.news}
                                            &title=${item.title}
                                            &content=${item.content}`">你好
                                            </RouterLink>-->
<!--    query传参-->
<!--    <RouterLink :to="{-->
<!--      path : '/MyTest5/Child',-->
<!--      query: { // query传值相当于 ?id=''&title=''&content=''-->
<!--        id: item.id,-->
<!--        title: item.title,-->
<!--        content: item.content-->
<!--      }-->
<!--    }">{{ item.title }}</RouterLink> &lt;!&ndash;相当于a标签, 要跳转的页面&ndash;&gt;-->
<!--    params传参第一种 -->
<!--    <RouterLink :to="`/MyTest5/Child/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink>-->
    <RouterLink :to="{ // 用params只能用name跳转
      name: '/MyTest5/Child',
      params: {
          id: item.id,
          title: item.title,
          content: item.content
      }
     }">{{ item.title }}</RouterLink>
  </div>
  <RouterView></RouterView> <!--要展示router页面的地方-->
</template>
<script lang="ts">
  /**
   * @Author Rin_pu
   * @Date 2025/2/18 15:16
   * @Description MyTest5
   * @todo axios请求
   */
  export default {
    name: "MyTest5"
  }
</script>

<script setup lang="ts">
  import useDog from "@/hooks/useDog"
  import {reactive} from "vue"
  import {RouterView, RouterLink, useRouter} from 'vue-router'
  const news = reactive([
    {id: '001', title: 'Rinpu', content: '不是哥们'},
    {id: '002', title: 'RRinpu', content: '不是是哥们'},
    {id: '003', title: 'RRRinpu', content: '不是是是哥们'}
  ])

  interface NewsInter {
    id: string,
    title: string,
    content: string,
  }

  const router = useRouter();
  function showNews(news : NewsInter) : void {
    router.push({
      name: '/MyTest5/Child',
      params: {
        id: news.id,
        title: news.title,
        content: news.content
      }
    })
  }

  const {dogList, addDog} = useDog();
</script>

<style scoped>
  img {
    height: 100px;
  }
</style>